<template>
	<div class="search-container">
		<el-form label-position="left" label-width="80px" :model="form">
			<el-form-item label="问题标题">
				<el-input placeholder="" v-model="form.name" @keydown.enter.native="handleEnter"></el-input>
			</el-form-item>
		</el-form>
		<el-button size="small" @click="searchData">检索</el-button>
	</div>
</template>

<script>
export default {
	props: {
		queryMode: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			form: {
				name: ''
			}
		};
	},
	watch: {
		queryMode: {
			handler(val) {
				if (val !== 'search') {
					this.form.name = '';
				}
			}
		}
	},
	methods: {
		searchData() {
			if (!this.form.name.trim()) {
				return;
			}
			this.$emit('searchData', this.form.name.trim());
			// this.form.name = '';
		},
		handleEnter(e) {
			e.preventDefault();
			e.stopPropagation();
			e.stopImmediatePropagation();
			this.searchData();
		}
	}
};
</script>

<style lang="less" scoped>
.search-container {
	display: flex;
	align-items: center;
	.el-form {
		display: flex;
		.el-form-item {
			padding-right: 18px;
			width: 400px;
		}

		.btn {
			padding: 0;
			.el-button {
				height: 34px;
				width: 64px;
				padding: 0;
				border: 1px solid #6384fe;
				color: #6384fe;
			}
		}
	}
}
</style>

<style lang="less">
.search-container {
	.el-form-item {
		margin: 0;
		label {
			padding: 0;
		}
		input {
			height: 34px;
		}
	}
	// .btn {
	// 	.el-form-item__content {
	// 		line-height: 120px;
	// 	}
	// }
	.scene-line {
		text-align: center;
		padding: 0 10px;
	}
}
</style>
